---
title: Barevné schéma
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Karta barevného schématu

Zobrazuje různá barevná schémata a je speciálně přizpůsobená pro světlé a tmavé motivy.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Vlastnosti       | Typ                                     | Popis                                                                                          | Výchozí |
| ---------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
| varianta         | textový řetězec                         | Varianta barevného schématu. Možnosti zahrnují `Tmavý`, `Světlý` a `Systémový` | světlý  |
| vybráno          | booleovská hodnota                      | If `true`, displays a checkmark to indicate the selected color scheme                          |         |
| další vlastnosti | `React.ComponentPropsWithoutRef<'div'>` | Standardní vlastnosti HTML `div` elementu                                                      |         |

</Tab>

</Tabs>

## Výběr barevného schématu

Umožňuje uživatelům vybrat různá barevná schémata.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Vlastnosti | Typ              | Popis                                                                                  |
| ---------- | ---------------- | -------------------------------------------------------------------------------------- |
| hodnota    | `Barevné schéma` | Aktuálně vybrané barevné schéma                                                        |
| onChange   | funkce           | Funkce zpětného volání, kterou chcete spustit při výběru barevného schématu uživatelem |

</Tab>

</Tabs>
